<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>

<body>
<input type="text" id="myname">
<input type="number" id="myage">
<button id="add">add</button>

<ui id="list"></ui>
<script type="module">
    // await异步需要在顶层使用，只需要加上type="module" 就可以任意使用

    //1.链接区块链
    var web3 = new Web3(Web3.givenProvider || "ws://localhost:7545");
    //授权
    let account =await web3.eth.requestAccounts()
    console.log(account)

    //2.链接智能合约, 参数1是 编译后 build下的"api"  参数2是 build下的"address"
    const studentStorage = await new web3.eth.Contract([
        {
            "inputs": [
                {
                    "internalType": "uint256",
                    "name": "",
                    "type": "uint256"
                }
            ],
            "name": "StudentList",
            "outputs": [
                {
                    "internalType": "uint256",
                    "name": "id",
                    "type": "uint256"
                },
                {
                    "internalType": "string",
                    "name": "name",
                    "type": "string"
                },
                {
                    "internalType": "uint256",
                    "name": "age",
                    "type": "uint256"
                },
                {
                    "internalType": "address",
                    "name": "account",
                    "type": "address"
                }
            ],
            "stateMutability": "view",
            "type": "function",
            "constant": true
        },
        {
            "inputs": [
                {
                    "internalType": "string",
                    "name": "_name",
                    "type": "string"
                },
                {
                    "internalType": "uint256",
                    "name": "_age",
                    "type": "uint256"
                }
            ],
            "name": "addList",
            "outputs": [
                {
                    "internalType": "uint256",
                    "name": "",
                    "type": "uint256"
                }
            ],
            "stateMutability": "nonpayable",
            "type": "function"
        },
        {
            "inputs": [],
            "name": "getList",
            "outputs": [
                {
                    "components": [
                        {
                            "internalType": "uint256",
                            "name": "id",
                            "type": "uint256"
                        },
                        {
                            "internalType": "string",
                            "name": "name",
                            "type": "string"
                        },
                        {
                            "internalType": "uint256",
                            "name": "age",
                            "type": "uint256"
                        },
                        {
                            "internalType": "address",
                            "name": "account",
                            "type": "address"
                        }
                    ],
                    "internalType": "struct StudentListStorage.Student[]",
                    "name": "",
                    "type": "tuple[]"
                }
            ],
            "stateMutability": "view",
            "type": "function",
            "constant": true
        }
    ],"0x1b4463C9B5bCf692D1b89A61eD207499C43144b1")
    console.log(studentStorage)
    add.onclick=async function (){
        // console.log(myname.value,myage.value)
   await  studentStorage.methods.addList(myname.value,myage.value)
          .send({
              from:account[0]
          })
        //添加完成后 获取列表
         getList()
    }
    //首页进入页面，获取列表
    getList()

    async function getList(){
       let res =  await studentStorage.methods.getList().call()
       console.log(res)
        list.innerHTML= res.map(item=>`<li>${item.id}--${item.name}--${item.age}--${item.account}`).join("")
    }
</script>
</body>
</html>